<template>
    <a-modal
            title="新增goods"
            :width="900"
            :visible="visible"
            :confirmLoading="confirmLoading"
            @ok="handleSubmit"
            @cancel="handleCancel">

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">

                <a-form-item
                        label="商品编号"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品编号"
                             v-decorator="['goodsId', {rules: [{required: true, message: '请输入商品编号！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="上架用户编号"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入上架用户编号"
                             v-decorator="['userId', {rules: [{required: true, message: '请输入上架用户编号！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="商品图片"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品图片"
                             v-decorator="['goodsImage', {rules: [{required: true, message: '请输入商品图片！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="商品名称"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品名称"
                             v-decorator="['goodsName', {rules: [{required: true, message: '请输入商品名称！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="商品价格"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品价格"
                             v-decorator="['goodsPrice', {rules: [{required: true, message: '请输入商品价格！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="商品库存"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品库存"
                             v-decorator="['goodsCount', {rules: [{required: true, message: '请输入商品库存！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="销量"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入销量"
                             v-decorator="['goodsVolume', {rules: [{required: true, message: '请输入销量！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="顶部图片"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入顶部图片"
                             v-decorator="['topImage', {rules: [{required: true, message: '请输入顶部图片！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="材质"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入材质"
                             v-decorator="['quality', {rules: [{required: true, message: '请输入材质！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="尺寸"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入尺寸"
                             v-decorator="['size', {rules: [{required: true, message: '请输入尺寸！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="成色"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入成色"
                             v-decorator="['degree', {rules: [{required: true, message: '请输入成色！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="颜色"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入颜色"
                             v-decorator="['color', {rules: [{required: true, message: '请输入颜色！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="结构描述"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入结构描述"
                             v-decorator="['describe', {rules: [{required: true, message: '请输入结构描述！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="商品说明配图"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品说明配图"
                             v-decorator="['descImage', {rules: [{required: true, message: '请输入商品说明配图！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="商品说明文字描述"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-input placeholder="请输入商品说明文字描述"
                             v-decorator="['desc', {rules: [{required: true, message: '请输入商品说明文字描述！'}]}]"/>
                </a-form-item>

                <a-form-item
                        label="分类"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-select style="width: 100%" placeholder="请选择分类"
                              v-decorator="['type', {rules: [{ required: true, message: '请选择分类！' }]}]">
                        <a-select-option v-for='(item,index) in types' :key="index" :value="item.value" :title="item.value">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item
                        label="是否为精选"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-select style="width: 100%" placeholder="请选择是否为精选"
                              v-decorator="['choiceness', {rules: [{ required: true, message: '请选择是否为精选！' }]}]">
                        <a-select-option v-for='(item,index) in choicenesss' :key="index" :value="item.name" :title="item.name">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item
                        label="审核"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback=""
                >
                    <a-select style="width: 100%" placeholder="请选择审核"
                              v-decorator="['audit', {rules: [{ required: true, message: '请选择审核！' }]}]">
                        <a-select-option v-for='(item,index) in audits' :key="index" :value="item.value" :title="item.value">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>

            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
    import { add } from '@/api/modular/goods/goodsManage';

    export default {
        data() {
            return {
                types: [{ "name": '女装', "value": 0},{ "name": '男装', "value": 1},{ "name": '包袋', "value": 2},{ "name": '配饰', "value": 3},{ "name": '五金', "value": 4},{ "name": '玩具', "value": 5}],
                choicenesss: [{ "name": '非精选', "value": 0},{ "name": '精选', "value": 1}],
                audits: [{ "name": '不通过', "value": 0},{ "name": '通过', "value": 1}],
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 15 }
                },
                visible: false,
                confirmLoading: false,
                form: this.$form.createForm(this)
            };
        },
        methods: {
            add(record) {
                this.visible = true;
            },
            handleSubmit() {
                const { form: { validateFields } } = this;
                this.confirmLoading = true;

                validateFields((errors, values) => {
                    if (!errors) {
                        add(values).then((res) => {
                            this.confirmLoading = false;
                            if (res.success) {
                                this.$message.success('新增成功');
                                this.handleCancel();
                                this.$emit('ok', values);
                            } else {
                                this.$message.info('新增失败：' + res.message);
                            }
                        }).finally((res) => {
                            this.confirmLoading = false;
                        });
                    } else {
                        this.confirmLoading = false;
                    }
                });
            },
            handleCancel() {
                this.form.resetFields();
                this.visible = false;
            }
        }
    };
</script>
